<template>
  <el-dialog v-model="getRPointEditDialogSwitch" title="route point num">
    <hr>
    <el-form >
      <span style="font-size: small;padding-left: 20px" >飞行高度（m）</span>
      <el-slider  v-model="getRPointCurrentHeightByIndex"
                  :max=100
                  :min=1
                  input-size="mini"
                  show-input
                  style="margin: 10px; width:90%;color: white">
      </el-slider>
      <hr>
      <span style="font-size: small;padding-left: 20px" >飞行速度（m/s）</span>
      <el-slider  v-model="getRPointCurrentVelocityByIndex"
                  :min="0.2"
                  :max="13"
                  input-size="mini"
                  show-input
                  step="0.1"
                  style="margin: 10px; width:90%;color: white">
      </el-slider>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button >Cancel</el-button>
        <el-button type="primary" @click="updateRP">Confirm</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "RPointEditDialog",
  data(){
    return{
      store:this.$store,
      // rPointEditDialogSwitch:this.$store.getters.getRPointEditDialogSwitch
    }
  },
  methods:{
    updateRP:function (){
      this.store.commit('rPointEditDialogOnAndOff',false);
    }
  },
  computed:{
    getRPointEditDialogSwitch:{
      get (){
        return this.store.getters.getRPointEditDialogSwitch;
      },
      set(newRPointEditDialogSwitch){
        this.store.commit('rPointEditDialogOnAndOff',newRPointEditDialogSwitch);
      }
    },
    getRPointCurrentHeightByIndex:{
      get(){
        let index = this.store.getters.getCurrentRPointIndex;
        let currentHeight = this.store.getters.getCurrentHeight;
        return currentHeight[index];
      },
      set(newHeightOfIndex){
        let index = this.store.getters.getCurrentRPointIndex;
        this.store.commit('setCurrentHeightOfIndex',{index,newHeightOfIndex});
      }
    },
    getRPointCurrentVelocityByIndex:{
      get(){
        let index = this.store.getters.getCurrentRPointIndex;
        let currentVelocity = this.store.getters.getCurrentVelocity;
        return currentVelocity[index];
      },
      set(newVelocityOfIndex){
        let index = this.store.getters.getCurrentRPointIndex;
        this.store.commit('setCurrentVelocityOfIndex',{index,newVelocityOfIndex});
      }
    }
  }
}
</script>

<style scoped>

</style>